<template>
    <div class="Navigation">
        <div class="Navigation2">
             <mu-flexbox justify="space-around" :gutter="0"> 
                <mu-flexbox-item class="flex-demo" basis="40%">
                    <router-link to='/'>
                        <em class="iocn1"></em>
                        <span>首页</span>
                    </router-link>
                </mu-flexbox-item>
                <mu-flexbox-item class="flex-demo" basis='40%'>
                    <router-link to='/'>
                        <em class="iocn2"></em>
                        <span>我的</span>
                    </router-link>
                </mu-flexbox-item>
                <mu-flexbox-item class="flex-demo" basis='40%'>
                    <router-link to='/cart'>
                        <em class="iocn3">
                            <i>{{goodslength}}</i>
                        </em>
                        <span>购物车</span>
                    </router-link>
                </mu-flexbox-item>
                <mu-flexbox-item class="flex-demo" basis='40%'>
                        <mu-raised-button label="加入购物车" class="demo-raised-button" primary @click='addshop'/>
                </mu-flexbox-item>
            </mu-flexbox>
        </div>
    </div>
</template>

<script>
    import { mapMutations, mapGetters } from 'vuex'
    export default {
        data () {
            return {
            
            }
        },
        props:{
            goods:'',
            goodid:''
        },
        computed: {
            ...mapGetters([
                'cart',
                'goodslength',
                'islogin'
            ])
        },
        methods: {
           addshop(){
                var goodprams = {}
                goodprams = this.goods
                goodprams.goodid = this.goodid
                goodprams.count = 1
                goodprams.value = true
                this.$store.commit('addToList',goodprams)
           }
        }
    }

</script>

<style lang="less" >
    .Navigation{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        .Navigation2{
            background-color: rgba(255,255,255,0.7);
        }
        .flex-demo{
            text-align: center;
            padding-top: 10px;
            a{
                color: #8a7f7f;
                font-size: 12px;
            }
            .iocn1{
                background-position: 0 0px;
            }
            .iocn2{
                background-position: -23px 0px;
            }
            .iocn3{
                background-position: 0 -21px;
                position: relative;
                i{  
                    display: inline-block;
                    position: absolute;
                    top: -10px;
                    background-color: #f23030;
                    line-height: 15px;
                    font-style: normal;
                    border-radius: 8px;
                    padding: 0 4px;
                    font-size: 8px;
                    color: #fff;
                    right: -9px;
                    border: 1px solid #fff;
                }
            }
            em{
                background: url('../assets/images/cart_sprits_all.png') 0 0 no-repeat;
                width: 22px;
                height: 22px;
                display: block;
                margin: 0 auto;
                background-color: #fff;
                background-size: 100px 100px;
                position: relative;
            }
        }
    }
    .demo-raised-button{
        font-size: 12px;
    }
    .mu-raised-button-label{
        padding: 0;
    }
    
</style>